<!-- 列表标题 -->
<template>
  <view :class="props.type == 'round' ? 'padding-lr-sm' : ''">
    <view
      class="aster-list-title dflex-b padding-lr w-full bg-main"
      :class="props.type == 'round' ? 'border-radius' : ''"
      @click="goto"
    >
      <view class="dflex">
        <view
          v-if="props.iconfont && props.iconfont != ' '"
          class="iconfont __left margin-right-sm"
          :class="props.iconfont"
          :style="{ color: props.color }"
        />
        <text :style="titleStyle">{{ props.title }}</text>
      </view>
      <view class="dflex">
        <text v-if="tip" class="tip margin-right-xs">{{ tip }}</text>
        <view class="htm">
          <slot></slot>
        </view>
        <view
          class="iconfont fs-sm"
          v-if="props.rightIcon && props.rightIcon != ' '"
          :class="props.rightIcon"
          :style="{ color: props.rightColor }"
        />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { computed } from 'vue';

  const props = defineProps({
    type: {
      type: String,
      default: 'square',
    },
    /** 左侧图标 */
    iconfont: {
      type: String,
      default: 'icon-liebiao',
    },
    /** 左侧图标的颜色 */
    color: {
      type: String,
      default: '#C0C4CC',
    },
    /** 标题 */
    title: {
      type: String,
      default: '列表标题',
    },
    /** 字体大小 */
    size: {
      type: Number,
      default: 28,
    },
    /** 字体weight */
    fwt: {
      type: String,
      default: 'normal',
    },
    /** 右侧内容 */
    tip: {
      type: [String, Number],
      default: '',
    },
    /** 右侧图标 */
    rightIcon: {
      type: String,
      default: 'icon-xiangyou',
    },
    /** 右侧图标的颜色 */
    rightColor: {
      type: String,
      default: '#c0c0c0',
    },
  });

  const emits = defineEmits(['goto']);

  const titleStyle = computed(() => {
    const style: any = {};
    style.fontSize = props.size + 'rpx';
    style.fontWeight = props.fwt;
    return style;
  });

  const goto = () => {
    emits('goto');
  };
</script>
<style lang="scss" scoped>
  .aster-list-title {
    height: 100rpx;
    line-height: 100rpx;
  }
  .aster-list-title {
    .__left {
      font-size: 40upx;
    }

    .iconfont {
      color: #c0c0c0;
    }

    .tip {
      font-size: 24upx;
      color: #c0c0c0;
    }

    .htm {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
